<template>
	<view class="">
		<view v-for="(item,index) in list" class="item" :key="index">
			<view class="title">{{item.title || '--'}}</view>
			<view class="detail">{{item.description  || '--'}}</view>
			<view class="flex align-center justify-between bottom">
				<view class="">
					提交时间：  {{item.createTime  || '--'}}
				</view>
				<view class="item-right-btn" @click="handleDel(item)">
					删除
				</view>
			</view>
		</view>
		<data-null v-if="!list.length"></data-null>
		<view class="none" v-if="!(total > params.page * params.limit) && list.length">
			没有更多了～
		</view>
		<showModal1 ref="showModal1"></showModal1>
	</view>
</template>

<script>
	import { getEnumList } from "@/api/pet/index/saler"
	import { pageDemandPage,demandDel } from "@/api/pet/service/buyer"
	import showModal1 from "@/components/show-modal1.vue"
	export default {
		components: {
			showModal1
		},
		data(){
			return{
				params:{
					page:1,
					limit:10,
				},
				list:[],
				total:0,
			}
		},
		methods:{
			handleDel(item) {
				this.$refs.showModal1.open({
					content: '确认删除此需求吗？',
					success: () => {
						demandDel({
							opid: item.id,
						}).then(res => {
							if (res) {
								uni.showToast({
									title: "删除成功"
								})
								this.init()
							}
			
						})
					}
				})
			},
			async getEnumList(){
				let res = await getEnumList()
				this.tabList = res.serveIssueStatus
			},
			reachBottom(){
				if(this.total > this.params.page * this.params.limit){
					this.params.page++
					this.getList()
				}
			},
			getList(){
				pageDemandPage({
					...this.params,
				}).then(res=>{
					this.list = [...this.list,...res.rows]
					this.total = res.total
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			},
			async init(type){
				this.params.page = 1
				this.list = []
				this.getList()
			},
			handleOperate(item,type){
				this.$emit('record',{
					item,
					type
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.item-right-btn {
		width: 142rpx;
		background: red;
		border-radius: 12rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #fff;
		line-height: 64rpx;
		text-align: center;
	}
	
	
	.none{
		width: 100%;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: var(--h4Color);
		line-height: 33rpx;
		margin-top: 40rpx;
	}
	.item{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx 24rpx;
		margin-bottom: 16rpx;
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--h1Color);
			line-height: 45rpx;
			margin-bottom: 16rpx;
		}
		.detail{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: var(--h2Color);
			line-height: 40rpx;
			
		}
		.bottom{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--h3Color);
			line-height: 37rpx;
			padding-top: 24rpx;
			border-top: 1rpx dashed #EEEEEE;
			margin-top: 28rpx;
		}
	}
</style>